<style>
    .footer-box {
        background-color: #1A3347;
        color: #fff;
        margin-top: 20px;
    }

    .upper-footer {
        margin-top: 20px;
    }

    .footer-link-box {
        width: 80%;
        margin: auto;
    }

    .footer-link-box .widget-title {
        text-align: center;
        font-size: 20px;
    }

    .footer-link-box .footer_widget a {
        color: #fff;
        border: none !important;
        background: none !important;        
        text-align: center;
    }

    .footer-link-box .footer_widget a:hover {
        color: #45C2B5;
    }

    .footer-business-widget {
        display: flex;
        align-items: center;
        padding: 0 15px;
        padding-left: 10%;
    }

    .footer-business:first-child {
        position: relative;
        padding-right: 80px;
        align-self: stretch;
        display: flex;
        align-items: center;
        margin-right: 30px;
        border-right: 1px solid #5BA9CD;
    }

    .lower-footer {
        margin: 20px 0px;
    }

    .pull-left {
        margin: auto;
        padding-left: 10%;
    }

    .pull-left a {
        color: #fff;
        font-weight: bold;
        text-decoration: none;
    }

    .pull-left a:hover {
        color: #45C2B5;
    }

    .back-to-top {
        position: fixed;
        z-index: 9999;
        bottom: 40px;
        right: -50px;
        text-decoration: none;
        background: #fff;
        font-size: 14px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        width: 50px;
        height: 50px;
        cursor: pointer;
        text-align: center;
        line-height: 51px;
        border-radius: 100%;
        -webkit-transition: all 250ms ease-in-out;
        -moz-transition: all 250ms ease-in-out;
        -o-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
        box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.045);
    }

    .back-to-top:hover {
        -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    .back-to-top.active {
        right: 25px;
    }

    .back-to-top .fa {
        color: inherit;
        font-size: 18px;
        font-family: FontAwesome !important;
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
</style>
<div class="footer-box container-fluid">
    <div class="upper-footer hidden-xs ">
        <div class="container">
            <div class="row">
                <div class="footer-link-box">
                    {foreach $categories as $menu}
                    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 second-widget-area">
                        <div class="footer_widget">
                            <h5 class="widget-title">{if !empty($menu.url)} <a href="{$menu.url}"><span>{$menu.name}</span></a>{else/}<span>{$menu.name}</span>{/if}</h5>
                            {notempty name="menu.child"}
                            <div class="menu-container">
                                <div class="list-group">
                                    {foreach $menu.child as $childmenu}
                                    <a href="{$childmenu.url}" class="list-group-item">
                                        {$childmenu.name}
                                    </a>
                                    {/foreach}
                                </div>
                            </div>
                            {/notempty}
                        </div>
                    </div>
                    {/foreach}
                    <!-- <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 second-widget-area">
                        <div class="footer_widget">
                            <h5 class="widget-title"><a href="/contactus.html"><span>联系我们</span></a></h5>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
    <div class="middle-footer">
        <div class="container">
            <div class="footer-business-widget">
                <div class="footer-business">
                    <img width="150px" src="/static/picture/logo1.png" alt="logo" class="img-responsive">
                </div>
                <div class="footer-business">
                    <img width="150px" height="150px" src="/static/picture/code.jpg" alt="code"
                        class="img-responsive">
                    <p style="text-align: center;">微信公众号</p>
                </div>
            </div>
        </div>
    </div>
    <div class="lower-footer">
        <div class="container">
            <div class="pull-left">
                <span>{$system.copyright ?? '© Copyright 2021 | 北京赛亿科技有限公司 | All rights reserved'} | <a
                        href="https://beian.miit.gov.cn/">{$system.icp ?? '暂无'} </a></span>
            </div>
        </div>
    </div>
</div>
<div class="back-to-top">
    <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
</div>
<script>
    $(document).scroll(function () {
        if ($(document).scrollTop() > 1600) {
            $(".back-to-top").addClass("active")
        } else {
            $(".back-to-top").removeClass("active")
        }
    })
    $(".back-to-top").click(function () {
        $(document).scrollTop(0)
    })
</script>